<template>
	<div class="box layout-padding">
		<div style="display: flex">
			<div>
				<div class="layout-padding-auto layout-padding-view" style="width: 17vw; margin-right: 20px">
					<div class="seach"></div>
					<el-tree
						style="max-width: 600px; height: 87vh; overflow-y: auto"
						:default-expand-all="true"
						:highlight-current="true"
						:data="treeData"
						:expand-on-click-node="false"
						:props="defaultProps"
						@node-click="handleNodeClick"
					/>
				</div>
			</div>
			<div>
				<div class="layout-padding-auto layout-padding-view" style="width: 68vw">
					<div class="seach-box">
						<div class="date-select">
							<span class="label">时间:</span>
							<el-date-picker
								style="
									width: 360px;
									background-color: transparent;
									border: 1px solid #0293c3;
									border-radius: 0 4px 4px 0;
									box-shadow: none;
									height: 28px;
									line-height: 28px;
								"
								v-model="value2"
								type="daterange"
								placeholder="请选择"
								:value-format="dateFormat2"
								@change="changeDate2"
							/>
						</div>
						<el-button type="primary" icon="el-icon-search" @click="getForm">查询</el-button>
						<el-button class="filter-item" plain type="primary" icon="el-icon-download" @click="exportBtn">导出 </el-button>
					</div>
					<div>
						<div class="body_top">
							<div><div class="chart" ref="chart"></div></div>
							<div>
								<el-table
									:data="tableDataList"
									stripe
									border
									style="width: 100%"
									:header-cell-style="{ background: '#2766B6', color: '#ffffff' }"
									:row-class-name="tableRowClassName"
								>
									<el-table-column prop="date" align="center" label="日期" width="180"> </el-table-column>
									<el-table-column prop="value" align="center" label="最大需量" width="180"> </el-table-column>
									<el-table-column prop="time" align="center" label="时间"> </el-table-column>
								</el-table>
							</div>
						</div>
						<div class="body_top">
							<div>
								<div><div class="chart" ref="timeLine"></div></div>
							</div>
							<div><div class="chart" style="position: relative; left: -25%; top: 15%" ref="echartsRadar"></div></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { formatter } from 'element-plus';
import { getQueryList, getForm } from '/@/api/powerdistribution/electricity/reportForms';
import { getCurveQueryEcharts, queryMaxDemandByMonth } from '/@/api/powerdistribution/electricity/demandanalysis';
import { getDateByType } from '/@/util/util';
import echarts from '/@/utils/chart.js';
import moment from 'moment/moment';
export default {
	name: 'index',
	data() {
		return {
			treeData: [],
			tableDataList: [],
			powerOptions: [],
			defaultProps: {
				children: 'bumDevLists',
				label: 'devName',
			},
			dateFormat2: 'YYYY-MM-DD',
			year: '',
			month: '',
			date: '',
			value2: '',
		};
	},
	mounted() {
		this.getList();
	},
	created() {
		this.value2 = [this.getNowDate().date, this.getNowDate().date];
	},
	methods: {
		handleNodeClick(data, node, self) {
			if (data.unitNo === undefined) {
				this.$message.warning('当前菜单点击无效！');
			} else {
				this.unitNo = data.unitNo;
				this.getForm();
			}
		},
		getNowDate() {
			let dateObj = getDateByType();
			let obj = {
				year: '',
				month: '',
				date: '',
				hours: '',
				minutes: '',
				seconds: '',
			};
			obj.year = String(dateObj.year);
			obj.month = dateObj.year + '-' + dateObj.month;
			obj.date = dateObj.year + '-' + dateObj.month + '-' + dateObj.date;
			obj.hours = dateObj.year + '-' + dateObj.month + '-' + dateObj.date + ' ' + dateObj.hours;
			obj.minutes = dateObj.year + '-' + dateObj.month + '-' + dateObj.date + ' ' + dateObj.hours + ':' + dateObj.minutes;
			obj.seconds = dateObj.year + '-' + dateObj.month + '-' + dateObj.date + ' ' + dateObj.hours + ':' + dateObj.minutes + ':' + dateObj.seconds;
			return obj;
		},
		getList() {
			getQueryList().then((res) => {
				this.treeData = res.data.map((item) => {
					item.devName = item.switchRoomName;
					return item;
				});
				this.unitNo = this.treeData[0].bumDevLists[0].unitNo;
				this.getForm();
			});
		},
		getForm() {
			getCurveQueryEcharts({
				key: 'P',
				unitNo: this.unitNo,
				startTime: this.value2[0],
				endTime: this.value2[1],
			}).then((res) => {
				this.initEchart(res);
				this.loadTimeList(res);
				this.loadEchartsRadar(res);
			});
			queryMaxDemandByMonth({
				key: 'P',
				unitNo: this.unitNo,
				startTime: this.value2[0] + ' ' + '00:00:00',
				endTime: this.value2[1] + ' ' + '23:59:59',
			}).then((res1) => {
				this.tableDataList = res1;
			});
		},
		changeDate2() {
			this.getForm();
		},
		exportBtn() {
			console.log('点击了导出');
		},
		initEchart(valData) {
			var myChart = echarts.init(this.$refs.chart);
			var option;

			let xData = [];
			let obj = {
				type: 'bar',
			};
			obj.data = valData.map((i) => i.value);
			xData = valData.map((i) => i.time);

			option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				legend: {
					itemHeight: '2',
					x: 'center',
					y: 'top',
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [
					{
						type: 'category',
						data: xData,
						axisTick: {
							alignWithLabel: true,
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						name: '单位：kW',
					},
				],
				series: [
					{
						name: `${this.value2[0]}至${this.value2[1]}最大需量`,
						type: 'bar',
						// barWidth: '60%',
						barMaxWidth: 30, //最大宽度
						data: obj.data,
					},
				],
			};

			option && myChart.setOption(option);
		},
		loadTimeList(valData) {
			// console.log(valData, 'kkkkkkkkkk');
			var myChart = echarts.init(this.$refs.timeLine);
			var option;

			option = {
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					data: [`${this.value2[0]}需量数据`],
				},
				xAxis: {
					type: 'category',
					data: ['00:00', '01:20', '04:00', '05:20', '08:00', '10:10', '12:40'],
				},
				yAxis: {
					type: 'value',
					name: '单位：kW',
				},
				series: [
					{
						name: `${this.value2[0]}需量数据`,
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						smooth: true,
					},
				],
			};

			option && myChart.setOption(option);
		},
		loadEchartsRadar(valData) {
			var myChart = echarts.init(this.$refs.echartsRadar);
			var option;

			var option = {
				tooltip: {
					trigger: 'item',
				},
				grid: {
					left: '3%',
					right: '2%',
					bottom: '3%',
					containLabel: true,
				},
				radar: {
					indicator: (function () {
						var res = [];
						for (var i = 0; i <= 23; i++) {
							res.push({ text: i + '时', max: 100 });
						}
						return res;
					})(),
					center: ['75%', '40%'],
					radius: 80,
				},
				series: [
					// 数据系列
					{
						type: 'radar',
						data: [
							// 具体数值
							{
								value: [10, 20, 70, 60, 50], //单个数据项的数值
								name: 'Data 1', //数据项名称,
								symbol: 'rect', //单个数据标记的图形,默认circle
							},
						],
					},
				],
			};
			// myChar.setOption(option);
			option && myChart.setOption(option);
		},
		tableRowClassName({ row, rowIndex }) {
			if (rowIndex === 0) {
				return 'warning-row';
			} else if (rowIndex === 2) {
				return 'success-row';
			}
			return '';
		},
	},
};
</script>
<style lang="scss" scoped>
.box {
	display: flex;
	height: 100%;
	margin: 10px;
	& > div:nth-child(1) {
		width: 20%;
	}

	& > div:nth-child(2) {
		width: 80%;
	}
}
.seach {
	display: flex;
	justify-content: center;
	align-items: center;
}
.seach-box {
	display: flex;
	justify-content: start;
	padding-left: 10px;
	gap: 20px;
	align-items: center;
	margin-bottom: 10px;

	.label {
		font-size: 15px;
		margin-right: 5px;
	}
}
:deep(.option-select) {
	width: 60px;
	margin-left: 10px;
	.el-input__wrapper {
		height: 36px;
	}
}
.date-select {
	margin-left: -10px;
}
.chart {
	height: 370px;
}
.body_top {
	display: flex;
	> div {
		flex: 1;
		height: 39vh;
		background-color: #f3f3f3;
		margin: 6px;
	}
}
.el-table .warning-row {
	background: oldlace;
}

.el-table .success-row {
	background: #f0f9eb;
}
</style>
